import 'package:flutter_easyloading/flutter_easyloading.dart';
import 'package:kongqi/global.dart';
import 'package:flutter/material.dart';
import 'package:kongqi/http/api.dart';
import 'package:kongqi/page/pm25detail.dart';

class PmPage extends StatefulWidget {
  PmPage({Key key}) : super(key: key);
  @override
  _PmPageState createState() => _PmPageState();
}

class _PmPageState extends State<PmPage> {
  List list = [];
  @override
  void initState() {
    getPM25ListData();
    super.initState();
  }

  getPM25ListData() {
    EasyLoading.show();
    getPM25List().then((res) {
      EasyLoading.dismiss();
      setState(() {
        list = res['result'];
      });
    });
  }

  List<Widget> renderList(items) {
    List<Widget> list = [];
    for (var i = 0; i < items.length; i++) {
      var item = items[i];
      list.add(
        InkWell(
          onTap: () {
            Navigator.push(
              context,
              MaterialPageRoute(
                builder: (context) => PM25DetailPage(
                  id: item['id'],
                ),
              ),
            );
          },
          child: Container(
            padding: EdgeInsets.fromLTRB(0, 10, 0, 10),
            decoration: BoxDecoration(
              border: Border(
                top: BorderSide(
                  color: Global.fontSecondColor.withOpacity(0.2),
                  width: 0.5,
                ),
              ),
            ),
            child: Row(
              children: [
                Text(
                  '　·',
                  style: TextStyle(
                    fontSize: 13,
                    color: Global.fontSecondColor,
                    fontWeight: FontWeight.w500,
                  ),
                ),
                Text(
                  '　[文章]',
                  style: TextStyle(
                    fontSize: 11,
                    color: Global.primaryColor,
                    fontWeight: FontWeight.w600,
                  ),
                ),
                Text(
                  '${item['title']}',
                  style: TextStyle(
                    fontSize: 13,
                    color: Global.fontSecondColor,
                    fontWeight: FontWeight.w500,
                  ),
                ),
              ],
            ),
          ),
        ),
      );
    }
    return list;
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      width: MediaQuery.of(context).size.width,
      height: MediaQuery.of(context).size.height,
      decoration: BoxDecoration(),
      child: SingleChildScrollView(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.start,
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Container(
              child: Image.asset('assets/images/zhuantibanner.jpg'),
            ),
            Container(
              padding: EdgeInsets.only(left: 5),
              margin: EdgeInsets.fromLTRB(5, 15, 0, 5),
              decoration: BoxDecoration(
                border: Border(
                  left: BorderSide(
                    width: 4,
                    color: Global.primaryColor,
                  ),
                ),
              ),
              child: Text(
                '导语',
                style: TextStyle(
                  fontSize: 17,
                  color: Global.primaryColor,
                  fontWeight: FontWeight.w600,
                ),
              ),
            ),
            Text(
              '　　PM2.5是指大气中直径小于或等于2.5微米的颗粒物，也称为可入肺颗粒物，富含大量的有毒、有害物质且在大气中的停留时间长、输送距离远，因而对人体健康和大气环境质量的影响更大。研究表明，PM2.5日平均浓度每增加10 微克/立方米，呼吸系统疾病的死亡风险就增加0.97%，心血管疾病的死亡风险增加的几率更高，为1.22%，心肺疾病死亡率和癌症死亡率分别升高6%和 8%。',
              style: TextStyle(
                fontSize: 13,
                color: Global.fontColor,
                fontWeight: FontWeight.w400,
                height: 1.9,
              ),
            ),
            Container(
              padding: EdgeInsets.only(left: 5),
              margin: EdgeInsets.fromLTRB(5, 15, 0, 5),
              decoration: BoxDecoration(
                border: Border(
                  left: BorderSide(
                    width: 4,
                    color: Global.primaryColor,
                  ),
                ),
              ),
              child: Text(
                'PM2.5防护知识',
                style: TextStyle(
                  fontSize: 17,
                  color: Global.primaryColor,
                  fontWeight: FontWeight.w600,
                ),
              ),
            ),
            Column(
              children: renderList(list),
            )
          ],
        ),
      ),
    );
  }
}
